<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
    <!-- 引入vue和element-ui的js库-->
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="css/auditor.css">
</head>
<body >
<div id="app">
    <label>名称：</label>
    <el-select class="event" v-model="event.value" placeholder="请选择" @change="datail($event)">
        <el-option
                v-for="item in event.options"
                :key="item.value"
                :label="item.value"
                :value="item.label">
        </el-option>
    </el-select>
    <div id="build" class="content" v-for="(item,index) in arr">
        <div class="content_Cen">
            <p>数据：{{index+1}}</p>  <el-select v-model="item.value" placeholder="请选择">
            <el-option
                    v-for="item in options"
                    :key="item.label"
                    :label="item.value"
                    :value="item.label">
            </el-option>
        </el-select>
        </div>
        <div class="btn">
            <el-button type="danger" @click="del(index)">删除</el-button>
        </div>
    </div>
    <div class="bot">
        <el-button type="primary" @click="add">添加一条</el-button>
        <el-button type="primary" @click="obtain">完成</el-button>
    </div>
</div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            event:{
                value: '',
                options: []
            },
            input: '',
            arr: [
                {
                    index: 1,
                    value: ''
                }
            ],
            options: [],
            id: '',
            List: []
        },
        computed: {
        },
        created() {
            if (localStorage.getItem("id")){
                this.datail(localStorage.getItem("id"))
                this.id = localStorage.getItem("id")
                this.event.value = localStorage.getItem("name")
            }
            this.item()
            this.list()
        },
        methods: {
            datail(a) {
                axios({
                    method: 'post',
                    url: Api + 'sp/FindFlowNode',
                    params:{
                        fid: a
                    }
                }).then(res=>{
                    if (res.data.flowNodes.length == 0) {
                        return
                    }
                    var a = []
                    for (const item in res.data.flowNodes) {
                        var obj = {
                            index: res.data.flowNodes[item].node,
                            value: res.data.flowNodes[item].uid
                        }
                        a.push(obj)
                    }
                    this.arr = a
                })
            },
            item(){
                axios({
                    method: 'post',
                    url: Api + 'sp/findAllflow',
                }).then(res=>{
                    var name = res.data.flows
                    var arr = []
                    for(const item  in name){
                        const obj = {
                            value: name[item].name,
                            label: name[item].id
                        }
                        arr.push(obj)
                    }
                    this.event.options = arr
                })
            },
            list() {
                axios({
                    methods: 'post',
                    url: Api + 'sp/getUsers'
                }).then(res=>{
                    const arr = []
                    for (const item in res.data.users) {
                        const obj = {
                            value: res.data.users[item].uname,
                            label: res.data.users[item].id
                        }
                        arr.push(obj)
                    }
                    this.options = arr
                })
            },
            // 添加
            add (){
                this.arr.push({
                    index: this.arr.length + 1,
                    value: ''
                })
            },
            // 删除
            del(index) {
                if (this.arr.length === '1') {
                    this.$message({
                        type: 'error',
                        message: '最少保留一条数据'
                    })
                    return
                }
                this.arr.splice(index,1)
                for (var i = 0; i < this.arr.length; i ++ ) {
                    this.arr[i].index = i + 1
                }
            },
            // 完成
            obtain() {
                if (!this.event.value) {
                    this.$message({
                        type: 'warning',
                        message: '类别不能为空!'
                    })
                    return
                }
                if (!this.arr[0].value ) {
                    this.$message({
                        type: 'warning',
                        message: '数据不能为空!'
                    })
                    return
                }
                var obj = false
                for (var a = 0; a < this.arr.length; a++) {
                    for (var b = a + 1; b < this.arr.length; b++){
                        if (this.arr[a].value ==  this.arr[b].value) {
                            obj = true;
                            break;
                        }
                    }
                    if (obj) {
                        break
                    }
                }
                if(obj) {
                    this.$message({
                        type: 'warning',
                        message: '当前选择有重复数据!'
                    })
                    return
                }
                axios({
                    methods: 'post',
                    url: Api + 'sp/saveSp',
                    params: {
                        Fid: this.id,
                        arr: JSON.stringify(this.arr)
                    }
                }).then(res=>{
                    if (res.status == '200') {
                        this.$message({
                            type: 'success',
                            message: res.data.data
                        })
                        setTimeout(function () {
                            location.href = './index-1.html'
                        },2000)
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.data.data
                        })
                    }
                })
            }
        }
    })
</script>
</html>
